<template>
    <van-tabbar route v-model="selectedTab" fixed @change="onChange">
        <van-tabbar-item :badge="item.routeName==='deliveryNotice'?badgeNum:''" replace :to="item.path"
                         v-for="(item, i) of tabbarItems"
                         :key="i" :id="i"
        >{{ item.title }}
            <template #icon="props">
                <img :src="props.active ? item.selected : item.normal"/>
            </template>
        </van-tabbar-item>
    </van-tabbar>
</template>

<script>
import {Tabbar, TabbarItem} from "vant";
import {getPure} from "../utils/request";

const sellerItem = [
    {
        title: "发布闲置",
        path: "/seller/home",
        routeName: "sellerHome",
        normal: require("@/assets/images/publish_dark.png"),
        selected: require("@/assets/images/publish.png"),
    },
    {
        title: "在售商品",
        path: "/seller/goods",
        routeName: "sellerGoods",
        normal: require("@/assets/images/onsall_dark.png"),
        selected: require("@/assets/images/onsall.png"),
    },
    {
        title: "发货提醒",
        path: "/seller/notice",
        routeName: "deliveryNotice",
        normal: require("@/assets/images/notice_dark.png"),
        selected: require("@/assets/images/notice_light.png"),
    },
    {
        title: "卖家中心",
        path: "/seller/user",
        routeName: "seller",
        normal: require("@/assets/images/ic_me_normal.png"),
        selected: require("@/assets/images/ic_me_selected.png"),
    },
]
const buyerItem = [
    {
        title: "首页",
        path: "/home",
        routeName: "home",
        normal: require("@/assets/images/home_dark.png"),
        selected: require("@/assets/images/home_light.png"),
    },
    {
        title: "购物车",
        path: "/shopcart",
        routeName: "shopcart",
        normal: require("@/assets/images/shop_cart_dark.png"),
        selected: require("@/assets/images/shop_cart_light.png"),
    },
    {
        title: "我的",
        path: "/user",
        routeName: "user",
        normal: require("@/assets/images/ic_me_normal.png"),
        selected: require("@/assets/images/ic_me_selected.png"),
    },
]

export default {
    components: {
        [Tabbar.name]: Tabbar,
        [TabbarItem.name]: TabbarItem,
    },
    created() {
        console.log("foot", this.$route.path)
    },
    data() {
        return {
            timer: "",
            badgeNum: '',
            selectedTab: 0,
            tabbarItems: buyerItem,
        };
    },
    computed: {
        // ...mapGetters("user",["isSeller"])
        isSeller() {
            return this.$store.state.user.user.type === "seller"
        }
    },
    watch: {
        isSeller(b) {
            console.log("watch")
            this.updateTabBar();
        }
    },
    mounted() {
        this.timer = setInterval(this.refreshBadge, 3000);
    },
    methods: {
        onChange(index) {
            console.log('index:', index)
            this.$router.push({name: this.tabbarItems[index].routeName});
        },
        updateTabBar() {
            this.selectedTab = 0 //选中的TabBar
            if (this.isSeller) {
                console.log("path", this.$route.path)
                this.tabbarItems = sellerItem
            } else {
                this.tabbarItems = buyerItem
            }
        },
        async refreshBadge() {
            if (this.isSeller) {
                let result = await getPure("/order/undelivery");
                console.log(result)
                this.badgeNum = result.data.length===0?"":result.data.length
            }
        }
    },
    beforeDestroy() {
        clearInterval(this.timer);
    }
};
</script>
<style scoped>
</style>
